<template>
  <div>
    <div class="form-wrap">
      <div v-for="(item,idx) in list" :key="idx" class="input-field">
        <span class="label">{{item.label}}</span>
        <input
          v-model="form[item.key]"
          class="input-block"
          type="text"
          :placeholder="item.placeholder"
          placeholder-class="placeholder-part"
        >
        <img
          v-if="item.key==='bankName'||item.key==='unionBank'"
          src="https://akk.028wkf.cn/kdb-weapp-img/icon/zfhh.png"
          mode="aspectFill"
          class="small"
          @click="showBank=true"
        >
      </div>
      <div class="input-field">
        <span class="label">银行所在地</span>
        <picker
          v-model="form.bankAddr"
          class="input-block"
          mode="region"
          @change="handleChangeAddr"
        >
          <span
            class="placeholder"
            :class="{hasVal:!!form.bankAddr.length}"
          >{{bankAddr}}</span>
        </picker>
      </div>

      <button class="btn-round-blue" @click="handleNextStep">下一步</button>

      <div
        class="popup-window"
        :class="{show:showBank}"
        @click="showBank=false"
      >
        <div class="box">
          <h1 class="title">以下银行可不填</h1>
          <p v-for="(bank,idx) in bankList" :key="idx" class="bank">{{bank}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import { APPLY_CLOUD_ACCOUNT_COMPANY } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: { bankAddr: [] },
      list: [
        {
          label: '企业名称',
          key: 'companyName',
          placeholder: '请输入企业名称'
        },
        {
          label: '对公账户',
          key: 'accountNo',
          placeholder: '请输入对公帐户'
        },
        {
          label: '营业执照编号',
          key: 'businessLicense',
          placeholder: '请输入营业执照编号'
        },
        {
          label: '法人姓名',
          key: 'legalName',
          placeholder: '请输入法人姓名'
        },
        {
          label: '法人身份证号',
          key: 'legalIds',
          placeholder: '请输入法人身份证号'
        },
        {
          label: '法人手机号',
          key: 'legalPhone',
          placeholder: '请输入法人手机号'
        },
        {
          label: '社会信用',
          key: 'uniCredit',
          placeholder: '请输入统一社会信用代码'
        },
        {
          label: '组织机构代码',
          key: 'organizationCode',
          placeholder: '请输入组织机构代码'
        },
        {
          label: '税务登记证',
          key: 'taxRegister',
          placeholder: '请输入税务登记证号'
        },
        {
          label: '开户行',
          key: 'parentBankName',
          placeholder: '请输入开户行'
        },
        {
          label: '开户支行',
          key: 'bankName',
          placeholder: '请输入开户支行'
        },
        {
          label: '支付行号',
          key: 'unionBank',
          placeholder: '请输入支付行号'
        }
      ],
      showBank: false,
      bankList: [
        '工商银行',
        '建设银行',
        '招商银行',
        '平安银行',
        '兴业银行',
        '华夏银行'
      ]
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    bankAddr () {
      if (this.form.bankAddr.length) {
        return Array.from(new Set(this.form.bankAddr)).join('')
      } else {
        return '请选择银行所在地'
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    handleChangeAddr (e) {
      let val = e.target.value
      this.form.bankAddr = val
    },
    handleNextStep () {
      if (this.validate()) {
        this.sendApply()
      }

      if (this.$store.state.test) {
        this.$router.push('/pages/mine/cloud-account/step3/company/main')
      }
    },
    validate () {
      let list = [
        'accountNo',
        'businessLicense',
        'companyName',
        'legalIds',
        'legalName',
        'legalPhone',
        'organizationCode',
        'parentBankName',
        'taxRegister',
        'uniCredit'
      ]

      if (!this.form.bankAddr.length) {
        this.$toast('请先完成表单')
        return false
      }
      for (const key of list) {
        if (!this.form[key]) {
          this.$toast('请先完成表单')
          return false
        }
      }
      return true
    },
    sendApply () {
      const vm = this

      let params = {
        ...vm.form,
        bizUserId: vm.account.shopId,
        province: vm.form.bankAddr[0],
        city: vm.form.bankAddr[1]
      }
      delete params.bankAddr

      APPLY_CLOUD_ACCOUNT_COMPANY(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$router.push('/pages/mine/cloud-account/step3/company/main')
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.form-wrap {
  > .input-field {
    > .label {
      width: 90px;
      border-right: 1px solid transparent;
    }
    > .input-block {
      width: calc(100% - 105px);
      .placeholder {
        color: $light-gray;
        &.hasVal {
          color: $black;
        }
      }
    }
    > .small {
      display: block;
      position: absolute;
      width: 24px;
      height: 24px;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      z-index: 10;
    }
  }
  > .btn-round-blue {
    margin: 30px 0;
  }
  > .popup-window {
    > .box {
      background-color: $white;
      width: 50%;
      height: 70%;
      margin: 15% auto;
      text-align: center;
      padding: 15px;
      overflow: hidden;
      overflow-y: auto;
      > .title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 15px;
      }
      > .bank {
        font-size: 14px;
        font-weight: 500;
        line-height: 150%;
      }
    }
  }
}
</style>
